<template>
  <span class="tree-option-box">
    <span class="line-box">
      <img class="tree-icon" v-if="DATA.list && DATA.list.length" src="@/assets/images/tree_file.png" alt="">
      <img class="tree-icon file" v-else src="@/assets/images/tree_leaf.png" alt="">
      <span>{{ DATA.name }}</span>
    </span>
    <span class="span_icon">
      <!-- v-if="DATA.isparent" -->
      <el-button
        class="options-btn"
        type="text"
        @click="(e)=>Append(STORE, DATA, NODE,e)"
      >
        <i class="el-icon-plus"></i>
      </el-button>
      <el-button
        class="options-btn"
        type="text"
        @click="(e)=>WatchInfo(STORE, DATA, NODE,e)"
      >
        <i class="el-icon-edit"></i>
      </el-button>
      <!-- v-if="DATA.delAble" -->
      <el-button
        class="options-btn"
        type="text"
        @click="(e)=>Delete(STORE, DATA, NODE,e)"
      >
        <i class="el-icon-delete"></i>
      </el-button>
      
    </span>
  </span>
</template>

<script>
export default {
  name: "",
  data() {
    return {};
  },
  props: ["NODE", "DATA", "STORE"],
  methods: {
    Append(s, d, n, e) {
        e.stopPropagation();
      //添加节点事件
      this.$emit("Append", s, d, n);
    },
    Delete(s, d, n, e) {
        e.stopPropagation();
      this.$emit("Delete", s, d, n);
    },
    WatchInfo(s, d, n, e) {
      this.$emit("WatchInfo", s, d, n);
    },
  },
};
</script>
<style scoped lang="scss">
.tree-option-box {
  position: relative;
  font-size: 18px;
  width: 100%;
  .line-box{
    display: flex;
    align-items: center;
  }
  .tree-icon {
    margin: 0 5px 0 8px;
    &.file {
      width: 20px;
      margin-left: 10px;
      margin-top: 1px;
    }
  }
  .options-btn {
    padding: 0;
    font-size: 18px;
  }
  .span_icon {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
  }
  &:hover {
    .span_icon {
      display: inline-block;
    }
    color: #285FE3;
  }
}
/deep/.el-button--text {
  color: #285FE3;
}
/deep/.el-button + .el-button{
  margin-left: 5px;
}
</style>